<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据分析</title>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <!--<script th:href="@{/static/js/admin/echarts.js}" src="/js/admin/echarts.js"></script>-->
    <script th:src="@{/static/js/admin/echarts.js}"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 100%;height:615px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    window.onresize = myChart.resize;
    var xData = function () {
        var data = [];
        for (var i = 1; i < 13; i++) {
            data.push(i + "月份");
        }
        return data;
    }();

    option = {
        title: {
            "text": "本年订单数量统计",
            "subtext": "BY 校园商铺",
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['发布', '售出', '总销量']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份', '7月份', '8月份', '9月份', '10月份', '11月份', '12月份'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '发布',
                min: 0,
                max: 50,
                interval: 10,
                axisLabel: {
                    formatter: '{value} 个'
                }
            },
            {
                type: 'value',
                name: '总销量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} 件'
                }
            }
        ],

        dataZoom: [
            {
                show: true,
                start: 1,
                end: 100
            },
            {
                type: 'inside',
                start: 1,
                end: 100
            },
            {
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        series: [
            {
                name: '发布',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 个';
                    }
                },
                data: [
                    22, 24, 37, 26, 28,45, 17, 16, 23, 20, 35, 46
                ]
            },
            {
                name: '售出',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 个';
                    }
                },
                data: [
                    14, 16, 29, 15, 20,32, 15, 10, 19, 12, 22, 35
                ]
            },
            {
                name: '总销量',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + '件';
                    }
                },
                data: [14, 30, 59, 74, 94, 126, 141, 151, 170, 182, 204, 239]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>
